<template>
	<view class="illustrate">
		<Bed v-if="isBed" />
		<Heart v-if="isHeart" />
		<Sleep v-if="isSleep" />
		<Step v-if="isStep" />
		<Calories v-if="isCalories" />
		<Blood v-if="isBlood" />
		<Hrv v-if="isHrv" />
		<Press v-if="isPress" />
		<Distance v-if="isDistance" />
		<Debt v-if="isDebt" />
		<Resting v-if="isResting" />
		<Satisfied v-if="isSatisfied" />
	</view>
</template>
<script>
import Bed from "./bed.vue";
import Heart from "./heart.vue";
import Sleep from "./sleep.vue";
import Step from "./step.vue";
import Calories from "./calories.vue";
import Blood from "./blood.vue";
import Hrv from "./hrv.vue";
import Press from "./press.vue";
import Distance from "./distance.vue";
import Debt from "./debt.vue";
import Resting from "./resting.vue";
import Satisfied from "./satisfied.vue";

export default {
	components: {
		Bed,
		Heart,
		Sleep,
		Step,
		Calories,
		Blood,
		Hrv,
		Press,
		Distance,
		Debt,
		Resting,
		Satisfied,
	},
	data() {
		return {
			illustrate: "satisfied",
		};
	},
	computed: {
		isBed() {
			return this.illustrate === "bed";
		},
		isHeart() {
			return this.illustrate === "heart";
		},
		isSleep() {
			return this.illustrate === "sleep";
		},
		isStep() {
			return this.illustrate === "step";
		},
		isCalories() {
			return this.illustrate === "calories";
		},
		isBlood() {
			return this.illustrate === "blood";
		},
		isHrv() {
			return this.illustrate === "hrv";
		},
		isPress() {
			return this.illustrate === "press";
		},
		isDistance() {
			return this.illustrate === "distance";
		},
		isDebt() {
			return this.illustrate === "debt";
		},
		isResting() {
			return this.illustrate === "resting";
		},
		isSatisfied() {
			return this.illustrate === "satisfied";
		},
	},
	onLoad(option) {
		this.illustrate = "sleep";
		if (this.illustrate === "bed") {
			uni.setNavigationBarTitle({
				title: "卧床时长",
			});
		} else if (this.illustrate === "heart") {
			uni.setNavigationBarTitle({
				title: "心率",
			});
		} else if (this.illustrate === "sleep") {
			uni.setNavigationBarTitle({
				title: "睡眠时长",
			});
		} else if (this.illustrate === "step") {
			uni.setNavigationBarTitle({
				title: "步数",
			});
		} else if (this.illustrate === "calories") {
			uni.setNavigationBarTitle({
				title: "卡路里",
			});
		} else if (this.illustrate === "blood") {
			uni.setNavigationBarTitle({
				title: "血氧",
			});
		} else if (this.illustrate === "hrv") {
			uni.setNavigationBarTitle({
				title: "HRV",
			});
		} else if (this.illustrate === "press") {
			uni.setNavigationBarTitle({
				title: "压力指数",
			});
		} else if (this.illustrate === "distance") {
			uni.setNavigationBarTitle({
				title: "距离",
			});
		} else if (this.illustrate === "debt") {
			uni.setNavigationBarTitle({
				title: "睡眠债",
			});
		} else if (this.illustrate === "resting") {
			uni.setNavigationBarTitle({
				title: "静息心率",
			});
		} else if (this.illustrate === "satisfied") {
			uni.setNavigationBarTitle({
				title: "睡眠满足度",
			});
		}
	},
};
</script>
<style lang="scss" scoped>
.illustrate {
	color: black;
	padding: 40rpx 50rpx;
	background-image: url("@/static/ring/ill/ill_bg.png");
	background-size: 100% 100%;
	background-repeat: repeat;
	background-position: center;

	view {
		line-height: 48rpx;
	}
}
</style>
